<template>
  <view class="contenter">
    <view class="head ">
      <view class="top flex">
        <view>
          <item-image :type="'1'" :img="data.userimg" :size="146"  class="u-margin-right-8"  :fade="false"/>
        </view>
        <view class="nei">
          <view class=" flex flex_bt">
            <view class="name">{{data.nickname}}</view>
            <view class="meirong">{{data.tname}}</view>
          </view>
          <view>
            <view class="u-pd-b-5">已服务：{{data.num}}单</view>
            <view class="flex flex_bt">
              <view>销售额：{{data.price}}</view>
              <view>好评率：{{data.com_rate}}%</view>
            </view>
          </view>

        </view>
      </view>
      <view class="store flex flex_bt flex-column">
        <view class="u-flex flex_bt item">
          <view class="u-flex">
            <u-image  :src="`/static/user/store_serve.png`"  :height="36" :width="36" :fade="false"></u-image>
            <view class="name">服务达成率</view>
          </view>
          <view class="lv">{{data.service_rate}}%</view>
        </view>
        <view class="u-flex flex_bt item">
          <view class="u-flex">
            <u-image  :src="`/static/user/store_lv.png`"  :height="36" :width="36" :fade="false"></u-image>
            <view class="name">销售达成率</view>
          </view>
          <view class="lv">{{data.sales_rate}}%</view>
        </view>
      </view>
    </view>
    <view class="con">
      <view class="main" v-for="(item,index) in tecData">
        <view class="u-pd-b-15">
          <view class="u-flex flex_bt">
            <view class="u-flex">
              <item-image :type="'1'" :img="item.userimg" :size="60"/>
              <view class="u-margin-left-10 name">{{item.nickname}}</view>
            </view>
            <view class="time">{{item.create_date}}</view>
          </view>
          <view class="u-flex u-margin-top-20">
            <view class="u-flex hao">
              <view class="lv u-margin-left-10">{{item.service}}</view>
              <view class="name">服务项目：{{item.sname}}</view>
            </view>
          </view>
        </view>
        <view class="nei">
          <view>{{item.content}}</view>
          <view class="u-flex u-flex-wrap">
            <view class="img " v-for="data in item.images" :key="data">
              <item-image :img="data" :width="160" :height="118"/>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "detail",
  data(){
    return{
      data: {},
      month:'',
      page:1,
      tecData:[],
    }
  },
  onLoad(option){
    this.rid = option.id
    this.setData()
  },
  methods:{
    setData(){
      //技师详情
      this.$api.tecDetail({id:this.rid}).then(res => {
        this.data = res.data
      })
      //技师详情
      this.$api.technicianComment({id:this.rid}).then(res => {
        this.tecData = res.data.data
      })

    },

  },
}
</script>

<style scoped lang="scss">
.contenter{
  margin: 0 32rpx;
}
  .head{
    margin-top: 20rpx;
    background: #FFFFFF;
    box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
    border-radius: 12rpx;
    padding: 26rpx;
    padding-bottom: 0 ;
    .store{
      color: #575757;
      font-size: 20rpx;
      background: #FFFFFF;
      .item{
        height: 88rpx;
        border-bottom: 6rpx solid #F2F2F2;
        &:last-child{
          border-bottom: 0;
        }
      }
      .name{
        margin-left: 20rpx;
      }
      .lv{
        margin-right: 20rpx;
      }
    }
    .top{
      border-bottom: 6rpx solid #F2F2F2;
      padding-bottom: 26rpx;
    }
    .nei{
      margin-left: 24rpx;
      font-size: 24rpx;
      color: #555555;
      width: 100%;
      .meirong{
        width: 112rpx;
        height: 42rpx;
        background: linear-gradient(180deg, #FCD8A0 0%, #EABD6E 100%);
        border-radius: 24rpx;
        text-align: center;
        color: #4B4B4B;
        font-weight: 500;
        line-height: 42rpx;
      }
      .name{
        font-size: 36rpx;
        color: #4B4B4B;
        margin-bottom: 20rpx;
        font-weight: 800;
      }
      .time{
        margin-top: 30rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .con{
    margin-top: 20rpx;
    padding: 24rpx 20rpx;
    .main{
      background: white;
      padding: 32rpx 48rpx;
      margin-top: 20rpx;
      .name{
        font-size: 28rpx;
        font-weight: bold;
        color: #000
      }
      .time{
        font-size: 24rpx;
        color: #909090;
      }
      .hao{
        .lv{
          width: 92rpx;
          height: 44rpx;
          font-size: 24rpx;
          border-radius: 8rpx;
          background: #45806E;
          color: white;
          text-align: center;
          margin-right: 20rpx;
          line-height: 44rpx;
        }
        padding-right: 42rpx;
        border-right: 2rpx solid #F2F2F2;

      }
      .zhong{
        padding-left: 42rpx;
      }
      .gai{
        width: 92rpx;
        height: 44rpx;
        border: 2rpx solid #E3E3E3;
        border-radius: 8rpx;
        background: #F2F2F2;
        font-size: 24rpx;
        color: #4B4B4B;
        text-align: center;
        line-height: 44rpx;

      }
      .nei{
        padding-top: 32rpx;
        font-size: 24rpx;
        border-top: 2rpx solid #f2f2f2;
        .img{
          margin-top: 30rpx;
          margin-right: 30rpx;
          &:nth-child(3n+0){
            margin-right: 0;
          }
        }
      }
    }
  }
</style>